<template>
   <!-- 账单总览 -->
   <Card title="账单总览">
        <template #extra>
            <el-switch 
              v-model="isYear" 
              active-text="按月" 
              inactive-text="按年" 
              @change="initAccountOverviewChart"
            />
        </template>
        <div id="accountOverviewChart" style="height: 100%;"/>
    </Card>
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/views/dashboard/mixins/resize'
import Card from './Card.vue';
export default {
  mixins: [resize],
  components: {
    Card
  },
  data() {
    return {
      isYear: true,
      chart: null
    }
  },
  computed: {},
  mounted() {
    this.initAccountOverviewChart()
  },
  methods: {
    initAccountOverviewChart () {
      this.chart = echarts.init(document.getElementById('accountOverviewChart', 'macarons'))
      this.chart.setOption({
          grid: {
              top: '10%',
              left: '2%',
              right: '2%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: {
              type: 'category',
              axisTick: {
                  alignWithLabel: true
              }
          },
          yAxis: {
              type: 'value',
              name: '元',
              axisTick: {
                  show: false
              }
          },
          dataset: {
              source: Array.from({length: this.isYear ? 13 : 31}, (_, index) => {
                      if (index) {
                          return [`${index}${this.isYear ? '月' : '日'}`, Math.random() * 1000]
                      }  else {
                          return ['month', 'value']
                      }
                  })
          },
          series: {
              type: 'line'
          }
      })
    }
  }
}
</script>
